﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no">
    <title>品牌故事发布</title>
    <!-- 基础css begin -->
    <link type="text/css" rel="stylesheet" href="/static/pkg/core.css">
    <!-- 基础css end -->
    <!-- 公用css begin -->
    <link type="text/css" rel="stylesheet" href="/static/pkg/combine.css?ver=20150629">
    <!-- 公用css end -->
</head>
<body id="publish">
    <img id="background-image" class="background-full" src="/static/benzbbs/images/bg.jpg" />
    <form id="form1">
        <div id="wrapper">
            <div id="content">
                <header>
                    <div class="cfix">
                        <div class="font-size-18 font-color float-left">品牌故事发布</div>
                        <div id="btnPublishNotice" class="font-size-14 float-right relative">
                            <span>发布规范</span>
                            <i id="notice-icon" class="icon-circle-arrow down"></i>
                            <div id="notice" class="notice" style="display:none;">
                                <div class="notice-arrow"></div>
                                <p>品牌故事发布规范：</p>
                                <p>不得涉及当前政治局势，包含人身攻击、诽谤、或其他地域歧视等一系列会引起板块不和谐的话题。</p>
                                <p>不得发布含有淫秽、恐怖或者其他不雅观图片内容的话题。</p>
                                <p>恶意灌水，抢楼，视其情节另行处罚。</p>
                            </div>
                        </div>
                    </div>
                    <div class="line1 margin-top-10"></div>
                </header>
                <section>
                    <div class="margin-bottom-5">故事主题：<span class="font-size-12">(30字以内，包含中英文标点符号)</span></div>
                    <div><input id="txtTitle" type="text" class="input-text width-full" required /></div>
                </section>
                <section>
                    <div class="margin-bottom-5">故事内容：<span class="font-size-12">(700字以内，包含中英文标点符号)</span></div>
                    <div><textarea id="txtContent" class="input-text width-full" style="height: 100px;" required></textarea></div>
                </section>
                <section>
                    <div class="margin-bottom-5">上传图片：</div>
                    <ul class="image-list image-box">
                        <li class="add-image input-image">
                            <input id="fileList" type="file" multiple="multiple" class="input-image" style="visibility: hidden; position: absolute;" />
                        </li>
                    </ul>
                    <div class="font-size-12">最多可上传9张图片</div>
                </section>
                <section>
                    <button id="btnSubmit" type="button" class="button width-full">提 交</button>
                </section>
            </div>
        </div>
    </form>
    <div id="modal" class="modal-wrapper" style="display: none">
        <div class="modal-container">
            <div class="modal-content">
                <p class="font-size-18 strong">恭喜您<br />话题发布成功</p>
                <p class="font-size-14 text-align-left">您的话题将于2个工作日内审核完毕，请耐心等待。如有问题请联系管理员，感谢您的参与！</p>
                <button id="btnConfirm" class="button width-5 margin-top-10">确定</button>
            </div>
        </div>
    </div>
    <!-- 组件依赖js begin -->
    <!--<script src="/static/global/js/jquery-1.11.2.js"></script>-->
    <script src="/static/global/gmu/dist/zepto.js"></script>
    <script src="/static/global/gmu/src/extend/touch.plus.js"></script>
    <script src="/static/global/gmu/src/extend/selector.js"></script>
    <script src="/static/global/gmu/src/extend/compatibleIE9.js"></script>
    <script src="/static/benzbbs/js/plupload.full.min.js"></script>
    <script src="/static/benzbbs/js/qiniu.min.js"></script>
    <script src="/static/global/gmu/src/widget/modal/modal.js"></script>
    <!-- 组件依赖js end -->
    <!-- 公用js begin -->
    <script src="/static/benzbbs/js/script.js?v=201506261"></script>
    <!-- 公用js begin -->
    <script type="text/javascript">

        var uploader = null;

        $(function(){

            initUploader();

            $("#btnSubmit").click(function(){
                submitThread();
            })

            $("#btnConfirm").click(function(){
                window.location.href = "/bbs/benz/userarticles?isrelease=0";
            })

            $("#btnPublishNotice").click(toggleNotice)

        })

        function toggleNotice() {
            var $notice = $("#notice");
            var $icon = $("#notice-icon");
            if ($notice.is(":visible")) {
                $notice.hide();
                $icon.removeClass("up");
            } else {
                $notice.show();
                $icon.addClass("up");
            }
        }
        function initUploader(){
            //上传图片
            uploader = new plupload.Uploader({
                runtimes: 'html5,flash',
                browse_button: "fileList",
                //file_data_name: "image",
                uptoken_url: "/QiNiuCore/GetUpLoadToken",
                url: "http://upload.qiniu.com",
                flash_swf_url: 'js/Moxie.swf',
                multi_selection: true,
                multipart_params: {},
                filters: {
                    max_file_size: '10mb',
                    mime_types: [{ title: "Image files", extensions: "jpg,jpeg,gif,png,bmp" }]
                },
                init: {
                    PostInit: function (up) {
                        setUploadToken(up);
                    },
                    FilesAdded: function (up, files) {
                        if (!checkImageCount(9, files.length)){
                            alert("图片不能超过9张");
                            return;
                        }
                        uploader.status = "uploading";
                        //禁用添加图片按钮，防止加载过程中又添加图片
                        $(".add-image input[type='file']").attr("disabled", "disabled");
                        //添加图片列表dom
                        var imageList = "";
                        //plupload.each(files, function (file) {
                        //    imageList += '<li id="' + file.id + '">' +
                        //                '<div class="shade"></div>' +
                        //                '<div class="progress">加载中</div>' +
                        //                '<div id="img' + file.id + '" class="image-cover"></div>' +
                        //                '</li>'
                        //});
                        for (var i = 0; i < files.length; i++) {
                            imageList += '<li id="' + files[i].id + '">' +
                                        '<div class="shade"></div>' +
                                        '<div class="progress">加载中</div>' +
                                        '<div id="img' + files[i].id + '" class="image-cover"></div>' +
                                        '</li>'
                        }
                        $(".image-list").prepend(imageList);
                        //加载dataURL
                        var delay = 300;
                        plupload.each(files, function (file, index) {
                            setTimeout(function () {
                                readAsDataURL(file.getNative(), function (url) {
                                    $("#" + file.id + " .image-cover").css("background-image", "url('" + url + "')").attr("data-url", url);
                                })
                            }, delay * index);
                        })
                        up.start();
                    },
                    BeforeUpload: function(up, file){
                        setUploadToken(up);
                    },
                    UploadProgress: function (up, file) {
                        $("#" + file.id).find(".progress").text(file.percent + "%");
                    },
                    FileUploaded: function (up, file, response) {
                        var result = $.parseJSON(response.response);
                        var $li = $("#" + file.id);
                        $li.find(".progress").remove();
                        $li.find(".shade").remove();
                        $li.attr("data-key", result.key);
                        setRemoveButton($li);
                        $li.click(function (e) {
                            if (!$(e.target).hasClass("remove")) {
                                slideImage($(this).find(".image-cover"));
                            }
                        })
                    },
                    UploadComplete: function (up, files) {
                        uploader.status = "complete";
                        $(".add-image input[type='file']").removeAttr("disabled");
                    },
                    Error: function (up, error) {
                        if (error.file.size > 10000000) {
                            alert("图片不能超过10MB");
                            return;
                        }
                        alert(error.message);
                        var $li = $("#" + error.file.id);
                        $li.find(".progress").html("<span class='font-color-red'>上传失败<span>");
                        setRemoveButton($li);
                    }
                }
            });
            uploader.init();
            function setRemoveButton($li) {
                $li.append('<a href="javascript:;" class="remove"></a>');
                $li.find(".remove").click(bindRemoveButton);
            }
        }
        function submitThread(){
            var title = $("#txtTitle").val();
            var content = $("#txtContent").val();
            var imageList = [];
            $(".image-list li[data-key]").each(function(){
                imageList.push($(this).attr("data-key"));
            })
            if (uploader.status == "uploading") {
                alert("图片上传未完成，请稍等...");
                return;
            }
            if (title == ""){
                alert("标题不能为空");
                $("#txtTitle").focus();
                return;
            }
            if (content == ""){
                alert("内容不能为空")
                $("#txtContent").focus();
                return;
            }
            if (title.length > 30) {
                alert("标题不能超过30字");
                return;
            }
            if (content.length > 700) {
                alert("内容不能超过700字");
                return;
            }
            $.ajax({
                url: "/bbs/benz/addarticle",
                type: "post",
                data: { title: title, content: content, imageList: imageList.join(",") },
                success: function(data){
                    if (data.ResultCode == "Success") {
                        clearInputContent();
                        $("#modal").modal();
                    } else {
                        alert(data.ResultMessage);
                    }
                },
                error: function (xhr, message) {
                    alert(xhr.statusText);
                }
            })
        }
        function clearInputContent() {
            $("input, textarea").val("");
            $(".image-list li[data-key]").remove();
        }
        function checkImageCount(max, addedCount){
            var existsCount = $(".image-list li[data-key]").length;
            addedCount = addedCount ? addedCount : 0;
            var totalCount = existsCount + addedCount;
            if (totalCount > max){
                return false
            }
            return true;
        }
        function bindRemoveButton(){
            var $this = $(this);
            var $li = $this.closest("li");
            $li.remove();
        }
        function setUploadToken(up){
            $.ajax({
                url: "/QiNiuCore/GetUpLoadToken",
                dataType: "json",
                success: function(token){
                    if (up.settings.multipart_params){
                        up.settings.multipart_params.token = token;
                    }else{
                        up.settings.multipart_params = { token: token };
                    }
                },
                error: function(message){
                    alert(message);
                }
            })
        }
        function readAsDataURL(file, onloadevent){
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                onloadevent && onloadevent(this.result)
                reader = null;
            };
        }
    </script>
</body>
</html>